[動画公開] 目指せ、爆速サイト! Cloudinaryで始める画像最適化 #devio2020

6月16日より、クラスメソッドの年次技術イベント「Developers.IO 2020 CONNECT」を開催しています。期間は2020年6月16日（火）から7月7日（火）、テーマごとに7日間の日程に分けて開催、セッションはなんと合計100本以上あります。

本日「目指せ、爆速サイト! Cloudinaryで始める画像最適化」というテーマにてセッション動画と資料を公開いたしました。

セッション情報

概要

サイトを魅力的なものにすべく、画像をふんだんに使いたい一方で、画像が重すぎてサイト表示が遅くなると、コンバージョン率が下がってしまうというジレンマがあります。

そんなときに役立つのが画像の最適化です。

画像フォーマット・画質などを最適化することで、画像サイズはかんたんに半分以下になります。

本セッションでは、Cloudinaryを使った画像最適化方法についてお話します。

セッション動画

セッション資料

画像最適化を試したい！

画像最適化をこれから始めたいお客様には、画像最適化の評価ツールがおすすめです。 画像を最適化することで、サイトがどのくらい軽くなるのか、かんたんにわかります。

画像最適化評価ツール

本ブログの場合、Cloudinaryを導入することでトップページで使われている2MBの画像が 160KB(7.4%)になるみたいですよ。 具体的にどのくらい軽くなるのか数字がある方が、説得力ありますよね。

セッションではL@E・CloudFront のエッジコンピューティングを活用し、アプリケーション改修無しにCloudinaryをポン付けする構成をご紹介しました。

この構成で、他社様の画像最適化システムをCloudinaryへシームレスに移行しました。

Cloudinartyは画像を圧縮するだけなく、画像に様々な加工を施すこともできます。

デモサイトでは様々なイフェクトを遊べます。

Cloudinary デモサイト

過去にVarnish/Nginx/ImageMagickを駆使してオレオレImage CDNを構築・運営していた身としては、当時Cloudinaryを知っていたらなぁと悔やむばかりです。

画像最適化・画像処理をこれからやってみたいお客様から、既存システムからの切り替えまで、幅広くご支援いたしますので、お気軽にお相談ください。

Cloudinary | クラスメソッドのパートナー

参考資料

本セッションの準備のために、ウェブ・画像最適化関連の多くの資料を参考にさせていただきました。

面白かったものをいくつかご紹介します(全部読んだとは言っていない)。

ウェブ全般

• [書籍]Real World HTTP 第2版
• [書籍]High Performance Browser Networking
• [動画]Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19) - YouTube
• [レポート]The 2019 Web Almanac
• [ポータル]Web  |  Google Developers

画像最適化

• [ドキュメント] Image Optimization | Cloudinary
• [ポータル] Image Optimization  |  Web Fundamentals  |  Google Developers
• [書籍] Essential Image Optimization